<template>
<div>
   <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <!-- 插入到left插槽位置 -->
        
         <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button size="small" type="primary" @click="handleDownload"
          >导出</el-button>
          <el-button @click="$router.push('/employees/import')" type="primary" size="small">导入excel</el-button>
          <el-button @click="addEmp" type="primary" size="small">+新增员工</el-button>
        </template>
      </PageTools>
    </div>
  </div>
<el-card>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      type="index"
      label="序号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      sortable
      width="120">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="手机号"
      sortable
      width="120">
    </el-table-column>
    <el-table-column
      prop="workNumber"
      label="工号"
      width="120">
    </el-table-column>
    <el-table-column
      
      label="聘用形势"
      width="100">
      <template slot-scope="scoped">
        {{scoped.row.formOfEmployment === 1? '正式' :'非正式'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="departmentName"
      label="部门"
      width="120">
    </el-table-column>
    <el-table-column
     
      label="入职时间"
      width="120">
      <template slot-scope="scoped">
        {{ scoped.row.timeOfEntry | forMat("YYYY-MM-DD") }}
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="500">
      <template slot-scope="scope">
        <el-button @click="$router.push('/employees/detail/'+scope.row.id)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">转正</el-button>
        <el-button type="text" size="small">调岗</el-button>
        <el-button type="text" size="small">离职</el-button>
        <el-button type="text" size="small">角色</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <el-pagination
   style="margin:20px 0; text-align:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paramsObj.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="paramsObj.size"
      layout="total,sizes,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
   <addorEdit 
   @success="success"
   v-if="dialogVisible"
   :dialogVisible.sync="dialogVisible">
   </addorEdit> 
</el-dialog>
   
    </div>
</template>

<script>
import {getEmployeeList} from '../../api/employees'
// import PageTools from "@/components/PageTools"
import addorEdit from './components/empDialog.vue'

export default {
  name: '',
  components: {
    addorEdit
  },
  // components:{
  //   PageTools
  // },
  data() {
    return {
    tableData:[],
     paramsObj: {
        page: 1,
        size: 5,
      },
      total:0,
      dialogVisible:false
    }
  },
  computed: {},
  created() {
    this.cnm()

  },
  methods: {
   async cnm(){
      const sb=await getEmployeeList(this.paramsObj)
      // console.log(sb);
      this.tableData=sb.data.rows
      this.total=sb.data.total
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.paramsObj.size=val
        this.cnm()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.paramsObj.page=val
        this.cnm()
      },
      addEmp(){
        this.dialogVisible=true
      },
      success(){
      this.cnm()
      this.dialogVisible=false
      },
      handleDownload() {
      import("@/vendor/Export2Excel").then(async (excel) => {
        /* list 导出的数据列表 */
        /* 获取所有的数据 */
        const res = await getEmployeeList({ page: 1, size: this.total });
        // const list = this.tableData;
        const list = res.data.rows;
        /* 处理之后返回的excel数据列表 data是一个二维数组
        formatJson====处理list数据，将数据处理成二维数组，返回使用data接收了
        */
        // const data = this.formatJson(filterVal, list);
        const data = this.formatJson(list);
        // 设置表头
        const tHeader = this.header;
        console.log(data, 99);
        excel.export_json_to_excel({
          multiHeader: [
            ["前端72期", "", "", "", "", "", "", "", "", ""],
            ["前端72===22222期", "", "", "", "", "", "", "", "", ""],
          ], // 设置多表头
          merges: ["A1:J1", "A2:B2"], // 合并列
          header: tHeader,
          data: data,
          filename: "web72", //设置文件名
        });
      });
    },
    formatJson(list) {
      const map = {
        id: "编号",
        password: "密码",
        mobile: "手机号",
        username: "姓名",
        timeOfEntry: "入职日期",
        formOfEmployment: "聘用形式",
        correctionTime: "转正日期",
        workNumber: "工号",
        departmentName: "部门",
        staffPhoto: "头像地址",
      };
      // 目的：将以为list数组转换成二维数组
      return list.map((item) => {
        /* 4-定义一个收集数据的对象 */
        var obj = {};
        /* 1-根据需求筛选出想要的几个数据===获取字段  map */
        /* 2-获取所有的英文键 */
        //['id', 'password', 'mobile', 'username', 'timeOfEntry', 'formOfEmployment', 'correctionTime', 'workNumber', 'departmentName', 'staffPhoto']
        var enKey = Object.keys(map);
        /* 3-获取每一个英文键所对应的值 */
        enKey.forEach((key) => {
          /* 5-获取中文键，并定义对象中属性 */
          var zhKey = map[key]; //编号
          obj[zhKey] = item[key]; // {编号:值}==>{编号：65c2,密码:1111112233}
        });
        /* obj
        {
          入职日期: "2018-11-02"
          头像地址: "https:jingwork-1310903985.cos.ap-nanjing.myqcloud.com/daji.jpg"
          姓名: "管理员"
          密码: "e10adc3949ba59abbe56e057f20f883e"
          工号: "9002"
          手机号: "13800000002"
          编号: "604f764971f93f3ac8f365c2"
          聘用形式: "1"
          转正日期: "2018-11-30"
          部门: "总裁办"
        }
        */

        /* 6-获取所有obj中的值 */
        var valueArr = Object.values(obj); // ["2018-11-02","管理员","9002"]
        // console.log(valueArr, 9);[]
        /* 7-获取obj中文键作为表头 */
        this.header = Object.keys(obj);
        return valueArr;
      });
    },
  }
}
</script>
<style lang='less'  scoped>
</style>
